<template>
  <div class="content">
    <Province
        v-if="showProvince"
        :fileName="fileName"
        @toMap="toMap"
    ></Province>

    <Map v-else @toProvince="toProvince"></Map>
  </div>
</template>

<script>
import Province from "./Province/index.vue";
import Map from "./Map/index.vue";

export default {
  components: {
    Province,
    Map,
  },
  data() {
    return {
      showProvince: false,
      fileName: null,
    };
  },
  methods: {
    // 显示省份数据
    toProvince({ fileName } = {}) {
      this.fileName = fileName;
      this.showProvince = true;
    },
    // 显示全国地图
    toMap() {
      this.showProvince = false;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 1000px;
  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
  margin-bottom: 24px;
}
</style>
